import React from "react"
import {Button, Tooltip, Divider, Typography, Drawer} from "antd"
import {
    QuestionOutlined,
    ApartmentOutlined,
    ClusterOutlined,
    DeploymentUnitOutlined,
    RadarChartOutlined,
    AppstoreOutlined,
    PlusOutlined,
    MinusOutlined,
    RedoOutlined,
    UndoOutlined,
    ExpandOutlined,
    AimOutlined,
    SettingOutlined,
    FieldTimeOutlined,
    SyncOutlined,
    TableOutlined
    
} from "@ant-design/icons"

import { Graph, Layouts } from "../graph/Graph" 
const { Text } = Typography


export default class Toolbar extends React.Component {

    constructor(props){
        super(props)

        this.state = {
            configVisible: false,
            graphCount: {
                vertex: 0,
                edge: 0
            }

        };

    } //constructor

    onConfigOpen() {
        this.setState({
            configVisible: true
        })
    }

    onConfigClose() { 
        this.setState({
            configVisible: false
        })
    }



    render() {
        return (
            <>

                <Text type="secondary" style={{ fontSize: 12}} strong>节点: </Text>
                <Text style={{ fontSize: 12}}>{ this.state.graphCount.vertex }</Text>&nbsp;&nbsp;

                <Text type="secondary" style={{ fontSize: 12}} strong>边: </Text>
                <Text style={{ fontSize: 12 }}>{ this.state.graphCount.edge }</Text>

                <Divider type="vertical" height="30" />

                <Button
                    icon={<UndoOutlined />}
                    size="small"
                    style={{ borderRadius: "0px", marginLeft: "-1px" }}
                />
                <Button
                    icon={<RedoOutlined />}
                    size="small"
                    style={{ borderRadius: "0px", marginLeft: "-1px" }}
                />

                <Tooltip title="放大">
                    <Button
                        icon={<PlusOutlined />}
                        size="small"
                        style={{ borderRadius: "0px", marginLeft: "-1px" }}
                        onClick={ () => Graph.zoomIn() }
                    />
                </Tooltip>

                <Tooltip title="缩小">
                    <Button
                        icon={<MinusOutlined />}
                        size="small"
                        style={{ borderRadius: "0px", marginLeft: "-1px" }}
                        onClick={ () => Graph.zoomOut() }
                    />
                </Tooltip>

                <Tooltip title="重置视图">
                    <Button
                        icon={<AimOutlined/>}
                        size="small"
                        style={{ borderRadius: "0px", marginLeft: "-1px" }}
                        onClick={ () => Graph.fitView() }
                    />
                </Tooltip>

                <Divider type="vertical" height="30" />

                <Tooltip title="随机布局">
                    <Button
                        icon={<QuestionOutlined />}
                        size="small"
                        style={{ borderRadius: "0px", marginLeft: "-1px" }}
                        onClick={() => Graph.updateLayout(Layouts.Random) }
                    />
                </Tooltip>

                <Tooltip title="力导布局">
                    <Button
                        icon={<DeploymentUnitOutlined />}
                        size="small"
                        style={{ borderRadius: "0px", marginLeft: "-1px" }}
                        onClick={ ()=> Graph.updateLayout(Layouts.Force) }
                    />
                </Tooltip>

                <Tooltip title="辐射布局">
                    <Button
                        icon={<RadarChartOutlined />}
                        size="small" 
                        style={{ borderRadius: "0px", marginLeft: "-1px" }}
                        onClick={ ()=> Graph.updateLayout(Layouts.Radial) }
                    />
                </Tooltip>

                <Tooltip title="环形布局">
                    <Button
                        icon={<SyncOutlined />}
                        size="small" 
                        style={{ borderRadius: "0px", marginLeft: "-1px" }}
                        onClick={ ()=> Graph.updateLayout(Layouts.Circular) }
                    />
                </Tooltip>

                <Tooltip title="格子布局">
                    <Button
                        icon={<TableOutlined />}
                        size="small"
                        style={{ borderRadius: "0px", marginLeft: "-1px" }}
                        onClick={ ()=> Graph.updateLayout(Layouts.Grid) }
                    />
                </Tooltip>

                <Divider type="vertical" height="30" />

                <Tooltip title="时间轴">
                    <Button
                        icon={<FieldTimeOutlined />}
                        size="small"
                        style={{ borderRadius: "0px", marginLeft: "-1px" }}
                    />
                </Tooltip>

                <Tooltip title="设置">
                    <Button
                        icon={<SettingOutlined/>}
                        size="small"
                        style={{ borderRadius: "0px", marginLeft: "-1px" }}
                        onClick={() => this.onConfigOpen()}
                    />
                </Tooltip>

                <Divider type="vertical" height="30" />



                <Drawer 
                title="配置"
                placement="left"
                closable="false"
                onClose={() => this.onConfigClose() }
                visible={ this.state.configVisible }
                >

                </Drawer>
            </>

        )
    }

}